<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <!-- 用户id、ip、登录时间、地区、状态 -->
            <a-col :md="8" :sm="24">
              <a-form-item label="用户">
                <a-input v-model="queryParam.userName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="IP">
                <a-input v-model="queryParam.ip" placeholder="" />
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="操作方法">
                  <a-input v-model="queryParam.method" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="操作时间">
                  <a-range-picker show-time v-model="queryParam.buildTime" style="width:100%"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="8" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (this.queryParam = {})">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" showPagination="auto" :scroll="{ x: 'auto' }">
          <span slot="param" slot-scope="text">
            <div class="remark-wrap copy-wrap" >{{ text }}
              <a @click="copy(text)">复制</a>
            </div>
          </span>
        </s-table>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import cloneDeep from 'lodash.clonedeep'
import { STable, Ellipsis } from '@/components'
import { getUserOpLogList } from '@/api/login'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '操作人',
    dataIndex: 'userName',
    width:'150px',
    key: 'userName',
  },
  {
    title: '操作时间',
    dataIndex: 'addTime',
    key: 'addTime',
    width:'180px',
    sorter: true,
  },
  {
    title: 'IP',
    dataIndex: 'ip',
    key: 'ip',
  },
  {
    title: '接口名',
    dataIndex: 'method',
    key: 'method',
  },
  {
    title: '参数',
    dataIndex: 'param',
    // key: 'param',
    scopedSlots: { customRender: 'param' },
  },
]

const statusMap = {
  1: {
    status: '#87d068',
    name: '成功',
  },
  2: {
    status: 'red',
    name: '失败',
  },
}
const typeMap = {
  1: {
    status: '#87d068',
    name: 'web',
  },
  2: {
    status: 'red',
    name: 'cgtw',
  },
}

export default {
  name: 'AWM-userLoginList',
  components: {
    STable,
    Ellipsis,
  },
  data() {
    this.columns = columns
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      parameter: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParam: {},
      // 状态
      statusMap,
      typeMap,
      // 排序
      sortJ: {
        addTime: 'add_time',
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let sortJ = this.sortJ
        if (parameter.sortField) {
          parameter.sortJ = sortJ
        }

        let queryParam = cloneDeep(this.queryParam)
        if(queryParam.buildTime){
          queryParam.startTime = queryParam.buildTime[0].format("YYYY-MM-DD HH:mm:ss")
          queryParam.endTime = queryParam.buildTime[1].format("YYYY-MM-DD HH:mm:ss")
          delete queryParam.buildTime
        }

        const requestParameters = Object.assign({}, parameter, queryParam)
        return getUserOpLogList(requestParameters).then((res) => {
          let result = {
            data: res.data.data,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalCount: res.data.total,
            totalPage: res.data.pages,
          }
          return result
        })
      },
    }
  },
  created() {},
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
    copy(data) {
      const url = data
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.remove()
      this.$message.success('复制成功')
    }

    // copy(text){
    //   this.$copyText(text).then(message => {
    //     this.$message.success('复制完毕')
    //   }).catch(err => {
    //     this.$message.error('复制失败')
    //   })
    // }
  },
}
</script>

 